<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-06-15 18:52:53
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-06-25 20:33:28
 * @FilePath: \g-table\test\test.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>g-table 测试实例</title>
<script src="../node_modules/vue/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="../node_modules/element-plus/dist/index.css">
<script src="../node_modules/element-plus/dist/index.full.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="../dist/g-table.umd.js"></script>
<link rel="stylesheet" href="../dist/g-table.css" />
</head>
<body>
<div id="app">
   <g-table
	ref = "gtable1"
    v-model:table-options="tableOptions"
    v-model:table-columns="tableColumns"
    v-model:table-data="tableData"
	@handleAdd="handleAdd"
   >
   <!--   @update:selected="onSelected"
    @update:current="onCurrent"
    @sort-change="onSortChange"-->
    <template #action="{ row, $index }">
      <el-button-group>
        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        <el-button size="small" @click="handleCopy(row)">复制</el-button>
      </el-button-group>      
    </template>
    <template #toolbar>
      <el-button @click="getSelectRows">getSelect</el-button>
    </template>
  </g-table>
</div>

<script>
    const { ref, reactive, onMounted, nextTick } = Vue;
//import { ref, reactive } from 'Vue'
const { ElMessage } = ElementPlus;
    const { createApp } = Vue;

    const app = createApp({
      data() {
        return {
			tableOptions: {
			  dataApi: '', // 数据源Api     http://localhost:5173/public/mockData.json
			  rowKey: 'name', // 行唯一标识字段名
			  pagination: true, // 是否分页
			  showSummary: true, // 是否显示合计行
			  summaryColumns: ['salary'], // 合计行字段名
			  selectionType: 'multiple', // 选择类型
			  selectedRowKeys: ['用户1','用户3'], // 已选行 rowKey字段的值
			  options: {  // 其他配置项，没有列表里width等的自行添加
				border: true, // 是否显示边框
				stripe: true,  // 是否显示斑马纹
				pageSizes: undefined // 每页显示数量选择器选项 [10,20,50,100,200]
			  },
			  treeProps:{  // 树形结构配置项
				children: 'children', // 子级字段名
				hasChildren: 'hasChildren', // 是否有子级字段名（可选）
				checkStrictly: false, // 是否父子不关联
			  },
			  tableLayout:'fixed', // 表格布局
			  showDefaultAdd: true, // 是否显示默认新增按钮
			  showAdvancedSearch: true, // 是否显示高级搜索
			  showRefresh: true, // 是否显示刷新按钮
			  showColumns:true, // 是否显示列设置
			  showExport: true, // 是否显示导出Excel按钮
			  showImport: true, // 是否显示导入按钮
			},
          tableColumns: [
			  { 
				columnId:0, // 列ID 方便列编辑时排序，不可重复
				prop: 'name',  // 字段名
				label: '姓名', // 列标题
				searchable: true, // 是否可搜索 自动按fieldOptions.type进行转换编辑框类型
				fieldOptions:{type: 'text'}, // 编辑框配置项 input date select number
				visible:true, // 是否显示
				resizable:true // 是否可拖动列宽
			  },
			  { 
				columnId:1, 
				prop: 'gender', 
				label: '性别', 
				searchable: true,     
				fieldOptions:{type: 'select',options:[{label:'男',value:'1'},{label:'女',value:'2'}]},
				visible:false,
				resizable:true 
			  },
			  { 
				columnId:2, 
				prop: 'birthday', 
				label: '生日', 
				searchable: true, 
				fieldOptions:{type: 'date',format:'YYYY-MM-DD'},
				visible:true,
				resizable:true,
				formatterFn: `if (cellValue) { 
				  const [year, month, day] = cellValue.split('-');
				  return \`\${year}年\${month}月\${day}日\`;
				  } else {
				   return cellValue;
				}`
			  },
			  { 
				columnId:3, 
				prop: 'age', 
				label: '年龄', 
				searchable: true, 
				fieldOptions:{type: 'number'},
				visible:false,
				resizable:true 
			  },
			  { 
				columnId:4, 
				prop: 'salary', 
				label: '工资', 
				searchable: true, 
				fieldOptions:{type: 'number'},
				visible:true,
				resizable:true
			  },  
			  { 
				columnId:5, 
				prop: 'action', 
				type: 'action', 
				label: '操作', 
				slot: 'action', 
				width: 180,
				visible:true,
				resizable:true 
			  }
			],
          tableData: [
			  { name: '用户1', gender: '1', birthday: '1990-01-01', age: 25, salary: 5000 },
			  { name: '用户2', gender: '2', birthday: '1992-05-15', age: 23, salary: 6000 },
			  { name: '用户3', gender: '1', birthday: '1988-11-10', age: 37, salary: 7500 },
			  { name: '用户4', gender: '2', birthday: '1995-03-22', age: 30, salary: 7000 }
			]
        };
      },
      methods: {
        handleAdd() {
          ElMessage.success('新增');
        },
        handleEdit(row) {
          ElMessage.info('编辑：' + JSON.stringify(row));
        },
        handleDelete(row) {
          ElMessage.error('删除：' + JSON.stringify(row));
        },
        handleCopy(row) {
          ElMessage.warning('复制：' + JSON.stringify(row));
        },
        getSelectRows() {
          console.log(this.$refs.gtable1.getSelectionRows());
        }
      }
    });

    // 注册组件
   // app.component('g-table', GTable);

    // 挂载应用
    app.use(ElementPlus).use(GTable).mount('#app');
  </script>

</body>
</html>